<template>
	<view class="appointment-content">
		<!-- 温馨提示 -->
		<!-- <view class="information">
			<view class="tips">
				温馨提示：1、如您完成预约后不能及时参观，须在您选择的
				<text class="red_color">进园时间开始前30分钟</text>
				提前取消预约，如
				<text class="red_color">2次</text>
				不及时取消，账号将在
				<text class="red_color">90天</text>
				内无法进行预约。 
			</view>
		</view> -->
		<view class="information">
			<view class="tips">
				温馨提示：为保障公众权益，杜绝有偿代约行为，请观众凭
				<text class="red_color">已预约的二维码或身份证</text>
				进园参观，截图二维码无效。
			</view>
		</view>
		<!-- 参观日期 -->
		<view class="box">
			<view class="title title_box">
				<text>参观日期</text>
				<text>{{ joinDate }}</text>
			</view>
			<view class="date_box">
				<view class="item-date" :class="{'open-item-date': item.status === 1,'ac-item-date':index === cTimeIndex }" v-for="(item,index) in scheduledTime" :key="item.id" @click="onSelectDate(index)">
					<text>{{ item.couponTime | formatTime }}</text>
					<text>{{ item | formatStatus }}</text>
				</view>
			</view>
		</view>
		<!-- 门票信息 -->
		<view class="ticketDetails">
			<view class="title-container">
				<image class="titleIcon" src="../../static/imgs/myTicket.png" mode=""></image>
				<view class="title">华东植物园门票</view>
				<view>1</view>
			</view>
			<view class="content-container">
				<view class="time">进园时间：{{ entryTime }}</view>
				<view>您当前预约的总人数：{{ orderUsers.length }}人</view>
			</view>
		</view>
		<!-- 联系人 -->
		<view class="box">
			<view class="title title_box">
				<text>预约人信息</text>
				<text class="add_btn" @click="onNavToAudience">添加/更换</text>
			</view>
			<view class="please_select" v-if="orderUsers.length === 0">最多选择5位预约人</view>
			<view class="form_box">
				<view class="item-list" v-for="(item,index) in orderUsers" :key="item.id" @click="delUser(item,index)">
					<view class="iconfont delIcon">&#xe677;</view>
					<view class="content">
						<view class="name">{{ item.name }}</view>
						<view>证件号码：{{ item.idCardNo }}</view>
						<view>手机号码：{{ item.mobile }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom_sty"></view>
		<view class="btn_sty" :class="{'ac-btn_sty':!isOrder}" @click="onOrderBtn">确定预约</view>
		<!-- 弹出层 -->
		<view class="popup-container" v-if="popupShow">
			<view class="popup__content">
				<view class="popup__wrapper">
					<view class="popup-dialog">
						<view class="dialog-title">温馨提示</view>
						<view class="dialog-content">
							<view class="item-dialog-content">
								<text>1、每个源新闻用户每天限约</text>
								<text class="redColor">1</text>
								<text>次，用户主动退票</text>
								<text class="redColor">不返还预约次数</text>
								<text>，敬请谅解! </text>
							</view>
							<view class="item-dialog-content">
								<text>2、为保障公众权益，杜绝有偿代约行为，请观众凭</text>
								<text class="redColor">已预约的二维码或身份证</text>
								<text>进园参观，截图二维码无效。</text>
							</view>
						</view>
						<view class="dialog-button-group">
							<view class="dialog-button" @click="popupHideBtn">取消</view>
							<view class="dialog-button border-left ac-dialog-button" @click="popupHideBtn">确认预约</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as api from '@/server/getData.js'
	import * as utils from '@/utils/index.js'
	import { mapGetters,mapMutations } from 'vuex'
	export default{
		filters:{
			formatTime(timeVal){
				return `${utils.moment.formatTime(timeVal,'MM-DD')}(${utils.moment.formatTime(timeVal,'dddd').replace('星期','')})`
				
			},
			formatStatus(item){
				if(item.status === 1) return `余${item.stock}`
				return '闭园日'
			}
		},
		computed:{
			...mapGetters(['orderUsers']),
			joinDate(){
				if(this.scheduledTime.length === 0) return ''
				const timeVal = this.scheduledTime[this.cTimeIndex].couponTime
				return `${utils.moment.formatTime(timeVal,'MM-DD')}(${utils.moment.formatTime(timeVal,'dddd').replace('星期','周')})`
			},
			entryTime(){
				if(this.scheduledTime.length === 0) return ''
				const timeVal = this.scheduledTime[this.cTimeIndex].couponTime
				// return `${utils.moment.formatTime(timeVal,'YYYY-MM-DD')} 10:00:00-20:00:00`
				return `${utils.moment.formatTime(timeVal,'MM-DD')}(${utils.moment.formatTime(timeVal,'dddd').replace('星期','周')})`
			}
		},
		data(){
			return {
				scheduledTime:[], //服务器时间
				cTimeIndex:0,
				popupShow:false,
				isOrder:false, //是否下单
			}
		},
		onLoad(){
			this.init_load()
		},
		methods:{
			...mapMutations(['setOrderUsers']),
			/**
			 * 1.获取服务器时间
			 */
			async init_load(){
				try{
					uni.showLoading({ title: '加载中' })
					await this.get_scheduledTime()
				}catch(e){}finally{
					uni.hideLoading();
				}
			},
			async get_scheduledTime(){
				const res = await api.time.get()
				this.scheduledTime = res
			},
			/**
			 * 选择参观日期
			 * @param {Object} index 数字
			 */
			onSelectDate(index){
				if(this.cTimeIndex * 1 === index * 1) return
				this.cTimeIndex = index
			},
			onNavToAudience(){
				uni.navigateTo({ url:'/pages/nav/audience?type=appointment' })
			},
			onNextBtn(){
				this.popupShow = true
			},
			popupHideBtn(){
				this.popupShow = false
			},
			// 删除联系人
			delUser(item,index){
				uni.showModal({
					title: '提示',
					content: `是否要移除${item.name}吗?`,
					success: async (res) => {
						if (res.confirm) {
							const orderUsers = JSON.parse(JSON.stringify(this.orderUsers))
							orderUsers.splice(index,1)
							this.setOrderUsers(orderUsers)
						}
					}
				})
			},
			// 下单
			async onOrderBtn(){
				if(this.isOrder) return
				try{
					this.isOrder = true
					uni.showLoading({ title: '预约中' })
					if(this.orderUsers.length ===0){
						uni.showModal({
							title: '提示',
							content: `请先添加预约人`,
							showCancel:false,
						});
						return
					}
					const parmars = {
						"mainTouristId": this.orderUsers[0].id,
						"touristIdList": this.orderUsers.map(item=>item.id),
						"travelDate": utils.moment.formatTime(this.scheduledTime[this.cTimeIndex].couponTime,'YYYY-MM-DD')
					}
					await api.order.create(parmars)
					this.setOrderUsers([])
					uni.navigateTo({ url:'/pages/nav/myTicket' })
				}catch(e){
					//TODO handle the exception
				}finally{
					uni.hideLoading();
					this.isOrder = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
	}
	.appointment-content{
		height: 100%;
		background-color: #f5f6fa;
		.information{
			margin: 20rpx;
			background-color: #fefbf1;
			border: 1px solid #ffb500;
			border-radius: 10rpx;
			padding: 20rpx 30rpx;
			.tips{
				font-weight: 400;
				font-style: normal;
				font-size: 26rpx;
				color: #f9871e;
				line-height: 1.573;
			}
			.red_color{
				color: #fd4d4f;
			}
		}
		.box{
			margin: 20rpx;
			padding: 30rpx 40rpx;
			background-color: #FFF;
			border-radius: 10rpx;
			.title{
				padding-bottom: 20rpx;
				border-bottom: 1px solid #ececec;
				font-size: 26rpx;
				font-weight: 600;
				.add_btn{
					font-weight: 400;
					color: #0b6cf9;
				}
			}
			.title_box{
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.date_box{
				color: #999999;
				display: flex;
				font-size: 24rpx;
				margin-top: 30rpx;
				margin-bottom: 30rpx;
				.item-date{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 142rpx;
					height: 120rpx;
					border: 1px solid #999;
					border-radius: 10rpx;
					margin-right: 20rpx;
					position: relative;
				}

				.open-item-date{
					color: #2979ff;
					border: 1px solid #2979ff;
				}
				.ac-item-date{
					background-color: #2979ff;
					color: #FFF;
				}
				.ac-item-date-img{
					position: absolute;
					width: 50rpx;
					height: 50rpx;
					top: 0;
					right: 0;
				}
			}
			.please_select{
				text-align: center;
				font-weight: 400;
				font-size: 28rpx;
				color: #999;
				margin-top: 20rpx;
			}
			.form_box{
				padding: 20rpx;
				.item-list{
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					padding-bottom: 20rpx;
					border-bottom: 1px solid #ececec;
				}
				.delIcon{
					color: #f56c6c;
					font-size: 44rpx;
					padding-right: 26rpx;
					flex-shrink: 0;
				}
				.content{
					font-size: 26rpx;
					color: #000;
					flex: 1;
					.name{
						font-size: 30rpx;
					}
				}
			}
		}
		.ticketDetails{
			background-color: #FFF;
			border-radius: 10rpx;
			padding: 30rpx 40rpx;
			margin: 20rpx;
			.title-container{
				font-size: 0;
				display: flex;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #ececec;
				.titleIcon{
					width: 40rpx;
					height: 40rpx;
				}
				.title{
					font-size: 26rpx;
					color: #333;
					font-weight: 500;
					margin-left: 10rpx;
				}
			}
			.content-container{
				padding-top: 20rpx;
				padding-bottom: 20rpx;
				font-size: 28rpx;
				color: #999;
				line-height: 1.573;
				.time{
					font-weight: 500;
					color: #333;
				}
			}
		}
		.bottom_sty{
			height: 100rpx;
		}
		.btn_sty{
			background-color: #999;
			height: 100rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #FFF;
			position: fixed;
			bottom: 0;
		}
		.ac-btn_sty{
			background-color: #2979ff;
		}
		.popup-container{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, .4);
			.popup__content{
				height: 100%;
				.popup__wrapper{
					height: 100%;
					transform: scale(1);
					opacity: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.popup-dialog{
						width: 600rpx;
						border-radius: 22rpx;
						background-color: #fff;
						.dialog-title{
							display: flex;
							justify-content: center;
							padding: 50rpx;
							color: #000;
							font-weight: bold;
						}
						.dialog-content{
							padding-left: 32rpx;
							padding-right: 32rpx;
							font-size: 30rpx;
							color: #333;
							line-height: 1.573;
							.item-dialog-content{
								// padding-top: 20rpx;
								padding-bottom: 20rpx;
							}
							.redColor{
								color: #fd4d4f;
							}
						}
						.dialog-button-group{
							display: flex;
							flex-direction: row;
							border-top: 1px solid #f5f5f5;
							.dialog-button{
								display: flex;
								flex: 1;
								flex-direction: row;
								justify-content: center;
								align-items: center;
								height: 90rpx;
							}
							.border-left{
								border-left: 1px solid #f5f5f5;
							}
							.ac-dialog-button{
								color: #007aff;
							}
						}
					}
				}
				.ac_popup__wrapper{
					transform: scale(1);
					opacity: 1;
				}
			}
		}
	}
</style>